<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions"  prefix="fn"%>
<%
String path = request.getContextPath();
request.setAttribute("path", path);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的订单-卓应商城</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	<link rel="stylesheet" href="/common/css/userinfo/base.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/global.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/header.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/home.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/user.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/bottomnav.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/footer.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/order.css" type="text/css">
	
	<link rel="stylesheet" href="/common/layui/css/layui.css"  media="all">
	<script type="text/javascript" src="/common/layui/layui.js" charset="utf-8"></script>
	
	<script type="text/javascript" src="/common/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="/common/js/order/header.js"></script>
	<script type="text/javascript" src="/common/js/order/home.js"></script>
	
	<style type="text/css">
		.btn-submit{
			width:50px;
			height:30px;
			line-height:30px;
			font-family:"Microsoft YaHei";
			font-size:16px;
			display:inline-block;
			text-decoration:none;
			border:1px solid #d00000;
			border-radius:2px;
			background:#d00000;
			margin:0;
			text-align:center;
			cursor:pointer;
		}
		.btn-detail{
			width:50px;
			height:30px;
			line-height:30px;
			font-family:"Microsoft YaHei";
			font-size:16px;
			display:inline-block;
			text-decoration:none;
			border:1px solid #d00000;
			border-radius:2px;
			background:#fff;
			margin-top:10px;
			text-align:center;
			cursor:pointer;
		}
		#pay-btn{
			color:#fff;
		}
		#get-btn{
			color:#fff;
		}
		#eva-btn{
			color:#fff;
		}
		#again-btn{
			color:#fff;
		}
	</style>
	
	<script>
	layui.use('element', function(){
		  var $ = layui.jquery
		  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
		  
		  //触发事件
		  var active = {
		    tabAdd: function(){
		      //新增一个Tab项
		      element.tabAdd('demo', {
		        title: '新选项'+ (Math.random()*1000|0)
		        ,content: '内容'+ (Math.random()*1000|0)
		        ,id: new Date().getTime() 
		      })
		    }
		 
		    ,tabChange: function(){
		      //切换到指定Tab项
		      element.tabChange('demo', '22'); //切换到：用户管理
		    }
		  };
		  
		  $('.site-demo-active').on('click', function(){
		    var othis = $(this), type = othis.data('type');
		    active[type] ? active[type].call(this, othis) : '';
		  });
		  
		  //Hash地址的定位
		  var layid = location.hash.replace(/^#test=/, '');
		  element.tabChange('test', layid);
		  
		  element.on('tab(test)', function(elem){
		    location.hash = 'test='+ $(this).attr('lay-id');
		  });
		  
		});
	</script>
	
</head>
<body>
		<!-- 顶部导航 end -->

		<!-- 头部 start -->
		<div class="header w1210 bc mt15">
			<!-- 头部上半部分 start 包括 logo、搜索、用户中心和购物车结算 -->
			<div class="logo w1210">
				<h1 class="fl" >
					<a href="/user/loginreg/index">
						<img src="http://localhost:8083/fileserver/logo/logo.jpg" style="height: 70px; width: 150px;">
					</a>
				</h1>
			</div>
			<!-- 头部上半部分 end -->

			<div class="clear"></div>

			<!-- 导航条部分 start -->
			<div class="nav w1210 bc mt10">
				<div class="navitems fl">
					<ul class="fl">
						<li class="current">
							<a href="/user/loginreg/index">首页</a>
						</li>
						<li>
							<a href="/product/fytype">商品大全</a>
						</li>
						<li>
							<a href="/product/showtype?tid=1">手机频道</a>
						</li>
						<li>
							<a href="/product/showtype?tid=2">数码产品</a>
						</li>
						<li>
							<a href="/product/showtype?tid=3">家用电器</a>
						</li>
						<li>
							<a href="/product/showtype?tid=5">衣装服饰</a>
						</li>
						<li>
							<a href="/product/showtype?tid=7">电子图书</a>
						</li>
					</ul>
					<div class="right_corner" style="float:right;">
						<a href="/shopcar/show">购物车</a>
					</div>
				</div>
			</div>
			<!-- 导航条部分 end -->
		</div>
		<!-- 头部 end-->

		<div class="clear"></div>

		<!-- 页面主体 start -->
		<div class="main w1210 bc mt10">
			<div class="crumb w1210">
				<h2>
					<strong><a href="/user/userinfo">个人中心</a></strong>
					<span>></span>
					<span>我的订单</span>
				</h2>
			</div>

			<!-- 左侧导航菜单 start -->
			<div class="menu fl">
				<h3><a href="/user/userinfo">个人中心</a></h3>
				<div class="menu_wrap">
					<dl>
						<dt>订单中心</dt>
						<dd class="cur">&nbsp;&nbsp;
							<a href="/order/show">我的订单</a>
						</dd>
						<dd>&nbsp;&nbsp;
							<a href="/user/mycollect">我的收藏</a>
						</dd>
					</dl>
					<dl>
						<dt>账户中心</dt>
						<dd>&nbsp;&nbsp;
							<a href="/user/userinfo">个人信息</a>
						</dd>
						<dd>&nbsp;&nbsp;
							<a href="/user/showaddress">收货地址</a>
						</dd>
					</dl>
					<dl>
						<dt>个人卖家</dt>
						<dd>&nbsp;&nbsp;
							<a href="/systemer/usertjsp">个人卖家中心</a>
						</dd>
					</dl>
				</div>
			</div>
			<!-- 左侧导航菜单 end -->

			<!-- 右侧内容区域 start -->
			<div class="content fl ml10" style="margin-left:1px">
				<div class="user_hd">
					<h3><a href="/order/show">我的订单</a></h3>
				</div>
				<div class="user_bd mt10">
				<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">全部订单</li>
    <li>未付款</li>
    <li>已付款</li>
    <li>已发货</li>
    <li>已收货</li>
    <li>已评价</li>
  </ul>
  <div class="layui-tab-content">
  
  <!-- 遍历所有订单 -->
  
    <div class="layui-tab-item layui-show" style="margin-left:-10px">
     
  
					<table class="orders">
						<thead>
							<tr>
								<th width="10%">订单号</th>
								<th width="20%">订单商品</th>
								<th width="10%">收货人</th>
								<th width="20%">订单金额</th>
								<th width="20%">下单时间</th>
								<th width="10%">订单状态</th>
								<th width="10%">操作</th>
							</tr>
						</thead>
						<tbody>
							<c:choose>
								<c:when test="${fn:length(orderList) == 0}">
								<tr>
									<td colspan="6"><br/><p>找不到符合条件的订单</p><br/></td>
								</tr>
								</c:when>
							
								<c:otherwise>
									<c:forEach items="${orderList}" var="order">
										<c:forEach items = "${order.items }" var="item">
											<tr>
												<td>
													<input name="orderId" value="${order.orderId}" type ="hidden"/>
													<a>${order.orderId}</a>
												</td>
												<td>
													<div>
														<a href="/product/pro?pid=${item.waresId}"><img src="http://localhost:8083/fileserver/wares/${item.imgpath}" alt="" /></a>
													</div>
													<p>
														<a href="/product/pro?pid=${item.waresId}">${item.waresName}</a>
													</p>
												</td>
												<td>${user.userSurname}</td>
												<td>￥ ${item.orderPrice}</td>
												<td>${order.orderTime}</td>
												<c:choose>
													<c:when test="${order.orderState == 0}">
														<td>待付款</td>
														<td>
															<div>
																<a id="pay-btn" class="btn-submit btn-new" href="/order/pay?orderId=${order.orderId}">付款</a>
																<a id="del-btn" class="btn-detail btn-new" href="/order/delete?orderId=${order.orderId}">删除</a>
															</div>
														</td>
													</c:when>
													<c:when test="${order.orderState == 1}">
														<td>待发货</td>
														<td>
															<div>
																<a>提醒发货</a>
															</div>
														</td>
													</c:when>
													<c:when test="${order.orderState == 2}">
														<td>待收货</td>
														<td>
															<div>
																<a id="get-btn" class="btn-submit btn-new" href="/order/takeover?orderId=${order.orderId}">收货</a>
															</div>
														</td>
													</c:when>
													<c:when test="${order.orderState == 3}">
														<td>已收货</td>
														<td>
															<div>
																<a id="eva-btn" class="btn-submit btn-new" href="/product/addlevel?orderItemid=${item.orderItemid}&waresName=${item.waresName}">评价</a>
															</div>
														</td>
													</c:when>
													<c:when test="${order.orderState == 4}">
														<td>已评价</td>
														<td>
															<div>
																<a id="again-btn" class="btn-submit btn-new" href="/product/pro?pid=${item.waresId}">再次购买</a>
															</div>
														</td>
													</c:when>
												</c:choose>
											</tr>
										</c:forEach>
									</c:forEach>
								</c:otherwise>
							</c:choose>
						</tbody> 
					</table>
					  </div>
					  
	 <!-- 遍历所有未付款订单 -->
    <div class="layui-tab-item"><table class="orders"  style="margin-left:-10px">
						<thead>
							<tr>
								<th width="10%">订单号</th>
								<th width="20%">订单商品</th>
								<th width="10%">收货人</th>
								<th width="20%">订单金额</th>
								<th width="20%">下单时间</th>
								<th width="10%">订单状态</th>
								<th width="10%">操作</th>
							</tr>
						</thead>
						<tbody>
							<c:choose>
								<c:when test="${fn:length(orderList) == 0}">
								<tr>
									<td colspan="6"><br/><p>找不到符合条件的订单</p><br/></td>
								</tr>
								</c:when>
							
								<c:otherwise>
									<c:forEach items="${orderList}" var="order">
										<c:forEach items = "${order.items }" var="item">
												<c:choose>
													<c:when test="${order.orderState == 0}">
											<tr>
												<td>
													<input name="orderId" value="${order.orderId}" type ="hidden"/>
													<a>${order.orderId}</a>
												</td>
												<td>
													<div>
														<a href="/product/pro?pid=${item.waresId}"><img src="http://localhost:8083/fileserver/wares${item.imgpath}" alt="" /></a>
													</div>
													<p>
														<a href="/product/pro?pid=${item.waresId}">${item.waresName}</a>
													</p>
												</td>
												<td>${user.userSurname}</td>
												<td>￥ ${item.orderPrice}</td>
												<td>${order.orderTime}</td>
														<td>待付款</td>
														<td>
															<div>
																<a id="pay-btn" class="btn-submit btn-new" href="/order/pay?orderId=${order.orderId}">付款</a>
																<a id="del-btn" class="btn-detail btn-new" href="/order/delete?orderId=${order.orderId}">删除</a>
															</div>
														</td>
											</tr>
													</c:when>
												</c:choose>
										</c:forEach>
									</c:forEach>
								</c:otherwise>
							</c:choose>
						</tbody> 
					</table></div>
					
	 <!-- 遍历所有已付款订单 -->					
    <div class="layui-tab-item"><table class="orders"  style="margin-left:-10px">
						<thead>
							<tr>
								<th width="10%">订单号</th>
								<th width="20%">订单商品</th>
								<th width="10%">收货人</th>
								<th width="20%">订单金额</th>
								<th width="20%">下单时间</th>
								<th width="10%">订单状态</th>
								<th width="10%">操作</th>
							</tr>
						</thead>
						<tbody>
							<c:choose>
								<c:when test="${fn:length(orderList) == 0}">
								<tr>
									<td colspan="6"><br/><p>找不到符合条件的订单</p><br/></td>
								</tr>
								</c:when>
							
								<c:otherwise>
									<c:forEach items="${orderList}" var="order">
										<c:forEach items = "${order.items }" var="item">
												<c:choose>
													<c:when test="${order.orderState == 1}">
											<tr>
												<td>
													<input name="orderId" value="${order.orderId}" type ="hidden"/>
													<a>${order.orderId}</a>
												</td>
												<td>
													<div>
														<a href="/product/pro?pid=${item.waresId}"><img src="http://localhost:8083/fileserver/wares/${item.imgpath}" alt="" /></a>
													</div>
													<p>
														<a href="/product/pro?pid=${item.waresId}">${item.waresName}</a>
													</p>
												</td>
												<td>${user.userSurname}</td>
												<td>￥ ${item.orderPrice}</td>
												<td>${order.orderTime}</td>
														<td>待发货</td>
														<td>
															<div>
																<a>提醒发货</a>
															</div>
														</td>
											</tr>
													</c:when>
												</c:choose>
										</c:forEach>
									</c:forEach>
								</c:otherwise>
							</c:choose>
						</tbody> 
					</table></div>
		 <!-- 遍历所有已发货订单 -->				
    <div class="layui-tab-item">
    <table class="orders"  style="margin-left:-10px">
						<thead>
							<tr>
								<th width="10%">订单号</th>
								<th width="20%">订单商品</th>
								<th width="10%">收货人</th>
								<th width="20%">订单金额</th>
								<th width="20%">下单时间</th>
								<th width="10%">订单状态</th>
								<th width="10%">操作</th>
							</tr>
						</thead>
						<tbody>
							<c:choose>
								<c:when test="${fn:length(orderList) == 0}">
								<tr>
									<td colspan="6"><br/><p>找不到符合条件的订单</p><br/></td>
								</tr>
								</c:when>
							
								<c:otherwise>
									<c:forEach items="${orderList}" var="order">
										<c:forEach items = "${order.items }" var="item">
												<c:choose>
													<c:when test="${order.orderState == 2}">
											<tr>
												<td>
													<input name="orderId" value="${order.orderId}" type ="hidden"/>
													<a>${order.orderId}</a>
												</td>
												<td>
													<div>
														<a href="/product/pro?pid=${item.waresId}"><img src="http://localhost:8083/fileserver/wares/${item.imgpath}" alt="" /></a>
													</div>
													<p>
														<a href="/product/pro?pid=${item.waresId}">${item.waresName}</a>
													</p>
												</td>
												<td>${user.userSurname}</td>
												<td>￥ ${item.orderPrice}</td>
												<td>${order.orderTime}</td>
														<td>待收货</td>
														<td>
															<div>
																<a id="get-btn" class="btn-submit btn-new" href="/order/takeover?orderId=${order.orderId}">收货</a>
															</div>
														</td>
											</tr>
													</c:when>
												</c:choose>
										</c:forEach>
									</c:forEach>
								</c:otherwise>
							</c:choose>
						</tbody> 
					</table></div>
						 <!-- 遍历所有已收货订单 -->
    <div class="layui-tab-item">
    <table class="orders"  style="margin-left:-10px">
						<thead>
							<tr>
								<th width="10%">订单号</th>
								<th width="20%">订单商品</th>
								<th width="10%">收货人</th>
								<th width="20%">订单金额</th>
								<th width="20%">下单时间</th>
								<th width="10%">订单状态</th>
								<th width="10%">操作</th>
							</tr>
						</thead>
						<tbody>
							<c:choose>
								<c:when test="${fn:length(orderList) == 0}">
								<tr>
									<td colspan="6"><br/><p>找不到符合条件的订单</p><br/></td>
								</tr>
								</c:when>
							
								<c:otherwise>
									<c:forEach items="${orderList}" var="order">
										<c:forEach items = "${order.items }" var="item">
												<c:choose>
													<c:when test="${order.orderState == 3}">
											<tr>
												<td>
													<input name="orderId" value="${order.orderId}" type ="hidden"/>
													<a>${order.orderId}</a>
												</td>
												<td>
													<div>
														<a href="/product/pro?pid=${item.waresId}"><img src="http://localhost:8083/fileserver/wares/${item.imgpath}" alt="" /></a>
													</div>
													<p>
														<a href="/product/pro?pid=${item.waresId}">${item.waresName}</a>
													</p>
												</td>
												<td>${user.userSurname}</td>
												<td>￥ ${item.orderPrice}</td>
												<td>${order.orderTime}</td>
														<td>已收货</td>
														<td>
															<div>
																<a id="eva-btn" class="btn-submit btn-new" href="/product/addlevel?orderItemid=${item.orderItemid}&waresName=${item.waresName}">评价</a>
															</div>
														</td>
											</tr>
													</c:when>
												</c:choose>
										</c:forEach>
									</c:forEach>
								</c:otherwise>
							</c:choose>
						</tbody> 
					</table></div>
					
						 <!-- 遍历所有已评价订单 -->
    <div class="layui-tab-item">
    <table class="orders"  style="margin-left:-10px">
						<thead>
							<tr>
								<th width="10%">订单号</th>
								<th width="20%">订单商品</th>
								<th width="10%">收货人</th>
								<th width="20%">订单金额</th>
								<th width="20%">下单时间</th>
								<th width="10%">订单状态</th>
								<th width="10%">操作</th>
							</tr>
						</thead>
						<tbody>
							<c:choose>
								<c:when test="${fn:length(orderList) == 0}">
								<tr>
									<td colspan="6"><br/><p>找不到符合条件的订单</p><br/></td>
								</tr>
								</c:when>
							
								<c:otherwise>
									<c:forEach items="${orderList}" var="order">
										<c:forEach items = "${order.items }" var="item">
												<c:choose>
													<c:when test="${order.orderState == 4}">
											<tr>
												<td>
													<input name="orderId" value="${order.orderId}" type ="hidden"/>
													<a>${order.orderId}</a>
												</td>
												<td>
													<div>
														<a href="/product/pro?pid=${item.waresId}"><img src="http://localhost:8083/fileserver/wares/${item.imgpath}" alt="" /></a>
													</div>
													<p>
														<a href="/product/pro?pid=${item.waresId}">${item.waresName}</a>
													</p>
												</td>
												<td>${user.userSurname}</td>
												<td>￥ ${item.orderPrice}</td>
												<td>${order.orderTime}</td>
														<td>已评价</td>
														<td>
															<div>
																<a id="again-btn" class="btn-submit btn-new" href="/product/pro?pid=${item.waresId}">再次购买</a>
															</div>
														</td>
											</tr>
													</c:when>
												</c:choose>
										</c:forEach>
									</c:forEach>
								</c:otherwise>
							</c:choose>
						</tbody> 
					</table></div>
  </div>
</div>
				</div>
			</div>
			<!-- 右侧内容区域 end -->
		</div>
		<!-- 页面主体 end-->

		<div class="clear"></div>
		
		<!-- 底部版权 start -->
		<div class="footer w1210 bc mt10">
			<div class="mt20">Joinlabs商城|JYUI|聊|多看书城|JY路由器|视频电话|JY天猫店|JY淘宝直营店|JY网盟|JY移动|隐私政策|Select Region</div>
			<div>©JY.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
		</div>
		<!-- 底部版权 end -->
	</body>
</html>